<template>
	<view class="bg-white" style="height: 100vh;">
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">登录</block>
		</cu-custom>
		<message ref="message"></message>
		<view class="flex justify-center margin-top-xl text-bold login-title">
			青少年兴趣课管理系统
		</view>
		<view>
			<form ref="loginRef" class="align-center justify-center" @submit="formSubmit" @reset="formReset">
				<view class="flex justify-center align-center margin-bottom">
					<view class="iconfont icon-gerenzhongxin input-lable"></view>
					<input class="form-input" v-model="loginForm.username" maxlength="30" name="username"
						placeholder="用户名/邮箱/手机号" />
				</view>
				<view class="flex justify-center align-center">
					<view class="iconfont icon-ziyuanxhdpi input-lable"></view>
					<input class="form-input" v-model="loginForm.password" maxlength="30" type="password"
						name="password" placeholder="密码" />
				</view>
				<view class="flex justify-center margin">
					<button type="default" form-type="reset" style="width: 35%; margin-right: 50rpx;">重置</button>
					<button form-type="submit" style="width: 35%;">登录</button>
				</view>
			</form>
			<!-- #ifdef MP-WEIXIN -->
			<view>
				<button class="bg-green iconfont icon-weixin" style="width: 80%;display: flex;justify-content: center;"
					@click="loginByWechat">
					<view style="margin-left: 10rpx;">微信登录</view>
				</button>
			</view>
			<!-- #endif -->
			<view class="flex justify-end margin-top" style="font-size: 30rpx;">
				<view class="margin-right">忘记密码</view>
				<!-- <view ></view> -->
				<navigator style="margin-right: 80rpx;" url="/pages/register/register" hover-class="none">没有账号，注册
				</navigator>
			</view>
		</view>
		
		<!-- 行为验证码 -->
		<verify ref="verify" :captchaType="'clickWord'" :imgSize="{ width: '260px', height: '135px' }" @success="login">
		</verify>
		
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="@/static/logo.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import graceChecker from '../../common/graceChecker.js'
	import Verify from '../../components/verify/verify.vue'

	export default {
		components: {
			Verify
		},
		data() {
			return {
				loginForm: {
					username: 'mumuwei',
					password: '123456'
				},
				loadModal: false
			}
		},
		created() {
			this.formReset()
		},
		methods: {
			// 点击登录处理事件
			formSubmit: function(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "string",
						checkRule: "6,20",
						errorMsg: "用户名应为6-20个字符"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,20",
						errorMsg: "密码至少6个字符"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					// 调用行为验证码
					this.$refs.verify.show()
				} else {
					this.$refs.message.error({
						title: graceChecker.error,
						duration: 2000
					})
				}
			},
			// 重置表单事件
			formReset: function(e) {
				this.loginForm = {
					username: '',
					password: ''
				}
			},
			// 登录事件
			login(params) {
				// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
				this.$store.dispatch('user/login', this.loginForm).then(res => {
					if (res) {
						this.formReset()
						// 登陆成功，返回上一页吗
						uni.navigateBack();
					}
				}).catch((err) => {
					this.formReset()
					this.$refs.verify.hide()
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
				})
			},
			// 微信登录
			loginByWechat() {
				this.loadModal = true
				const _this = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize:true,
					success: function(loginRes) {
						_this.$store.dispatch('user/loginByWechat', loginRes.code).then(res => {
							if (res) {
								_this.loadModal = false
								_this.formReset()
								// 登陆成功，返回上一页吗
								uni.navigateBack();
							}
						}).catch((err) => {
							_this.loadModal = false
							_this.formReset()
							_this.$refs.verify.hide()
							_this.$refs.message.error({
								title: err.msg,
								duration: 2000
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.login-title {
		font-size: 45rpx;
		margin-bottom: 80rpx;
	}

	.input-lable {
		font-size: 40rpx;
		position: absolute;
		left: 100rpx;
	}

	.form-input {
		border: 1px solid #d9d9d9;
		border-radius: 10rpx;
		height: 85rpx;
		font-size: 30rpx;
		width: 80%;
		padding-left: 80rpx;
	}
</style>
